<template>
    <div class="son">
        <h3>I am a child component,i have a button, please click me </h3>
        <button @click="clickMe">this is a button</button>
        <button @click="alertMe">弹框</button>
        <button @click="handleMe(1, 2, 3, $event)">弹框</button>
        <button @click="handleCustomer">自定义事件</button>
    </div>
</template>
<script setup lang="ts">
let props = defineProps(['info', 'money'])
let $e = defineEmits(['xxx'])
const clickMe = () => {
    console.log(props.info, props.money)
    // can't modify this value,because it's readonly
    // props.money += 100;
}
const alertMe = () => {
    alert(12306)
}
const handleMe = (a, b, c, $event) => {
    console.log(a, b, c, $event)
}
const handleCustomer = () => {
    $e('xxx','A','B')
}
</script>
<style scoped>
.son{
    width: 400px;
    height: 200px;
    border: 1px solid yellow;
}

</style>